<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米登录页面</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			a {
				color: #666666;
				text-decoration: none;
			}
			
			#header {
				width: 100%;
				height: 100px;
				min-width: 600px;
			}
			
			#header img {
				margin-top: 22px;
			}
			
			#header .img1 {
				margin-left: 110px;
				margin-right: 18px;
			}
			
			#main {
				width: 100%;
				height: 557px;
				margin-bottom: 50px;
				padding-top: 33px;
				background: #14212A url(img/login/banner.jpg) center center no-repeat;
			}
			
			#main .myform {
				width: 402px;
				margin: 0px 0px 0px 838px;
				background-color: white;
				height: 436px;
			}
			
			#main #myform1 {
				width: 402px;
				height: 90px;
				background-color: white;
			}
			
			ul {
				list-style-type: none;
			}
			
			#main #myform1>ul {
				margin-left: 30px;
			
			}
			
			#main #myform1 li {
				float: left;
				
			}
			
			#main #myform1>ul li {
				width: 170px;
				line-height: 80px;
				text-align: center;
				font-size: 24px;
				cursor: pointer;
				margin-bottom: 20px;
			}
			#main #myform1 input {
				width: 340px;
				height: 52px;
				text-indent: 13px;
				outline: 0px;
			}
			
			#main #myform1 #btn {
				background-color: #F87300;
				font-size: 18px;
				color: white;
				border: 0px;
			}
			
			#main .list {
				margin: 10px 0px 0px 110px;
			}
			
			#main .list span {
				font-size: 14px;
				color: #E0E0E0;
				margin: 5px;
			}
			
			#main .list>li a {
				font-size: 14px;
				margin-top: 10px;
			}
			
			#main #myform1 div {
				clear: both;
				width: 402px;
				height: 436px;
				background-color: white;
				display: none;
			}
			
			#main #myform1 #myformmain2 {
				padding-top: 70px;
				text-align: center;
				height: 366px;
			}
			
			#tanhao {
				display: inline-block;
				width: 15px;
				height: 15px;
				border-radius: 8px;
				background-color: #FF6700;
				text-align: center;
				color: white;
				font-size: 12px;
				margin-left: 30px;
				margin-top: 10px;
			}
			
			#main #myform1 #myformmain2 #yzmsg {
				font-size: 12px;
				color: #FF6700;
			}
			
			#tr1,
			#tr2,
			#tr3 {
				display: none;
			}
			
			#yzmsg {
				display: inline-block;
				width: 200px;
				line-height: 30px;
				font-size: 14px;
				color: #F87300;
			}
			
			.zhifufangshi {
				padding-left: 60px;
			}
			
			.zhifufangshi li {
				width: 70px;
				height: 50px;
				float: left;
				overflow: hidden;
			}
			
			.zhifufangshi .li1 {
				background: url(img/login/qq.png) center center no-repeat;
			}
			
			.zhifufangshi .li1:hover {
				background: url(img/login/qqhover.png) center center no-repeat;
			}
			
			.zhifufangshi .li2 {
				background: url(img/login/weibo.png) center center no-repeat;
			}
			
			.zhifufangshi .li2:hover {
				background: url(img/login/weibohover.png) center center no-repeat;
			}
			
			.zhifufangshi .li3 {
				background: url(img/login/zhifubao.png) center center no-repeat;
			}
			
			.zhifufangshi .li3:hover {
				background: url(img/login/zhifubaohover.png) center center no-repeat;
			}
			
			.zhifufangshi .li4 {
				background: url(img/login/weixin.png) center center no-repeat;
			}
			
			.zhifufangshi .li4:hover {
				background: url(img/login/weixinhover.png) center center no-repeat;
			}
			
			#otherlogin {
				font-size: 12px;
				color: #BBBBBB;
			}
			
			#footer {
				width: 100%;
				height: 100px;
				font-size: 12px;
				overflow: hidden;
				text-align: center;
				color: #757575;
			}
			
			#footer ul {
				margin-left: 560px;
			}
			
			#footer ul li {
				float: left;
				line-height: 35px;
			}
			
			#footer ul li a {
				color: #757575;
			}
			
			#footer ul li a:hover {
				color: #000000;
			}
			
			#footer ul li span {
				margin: 0px 10px;
			}
		</style>
	</head>

	<body>
		<div id="header">
			<img src="img/SY/logo.png" class="img1" /><img src="img/login/xiaomi.png" />
		</div>
		<div id="main">
			<div class="myform">
				<div id="myform1">
					<ul class="list1">
						<li onclick="show(this,'myformmain1')"style="color: #F56600;">
						帐号登录<span style="font-size: 26px;color: #E0E0E0;float: right;">|</span></li>
						<li onclick="show(this,'myformmain2')">
						扫码登录
						</li>
					</ul>
					<div id="myformmain1" style="display: block;">
						<form onsubmit="return yanzheng()">
							<table border="0" cellspacing="0" cellpadding="0" width="402px">
								<tr height="70px" align="center" valign="top">
									<td><input type="text" name="" id="username" value="" placeholder="邮箱/手机账号/小米账号" /></td>
								</tr>
								<tr height="50px" align="center" valign="top">
									<td><input type="password" name="" id="pwd" value="" placeholder="密码" /></td>
								</tr>
								<tr height="30px" valign="center" id="tr1">
									<td><span id="tanhao">!</span><span id="yzmsg">请输入账号</span></td>
								</tr>
								<tr height="30px" valign="center" id="tr2">
									<td><span id="tanhao">!</span><span id="yzmsg">请输入密码</span></td>
								</tr>
								<tr height="30px" valign="center" id="tr3">
									<td><span id="tanhao">!</span><span id="yzmsg">用户名或密码不正确</span></td>
								</tr>
								<tr height="70px" align="center" valign="center">
									<td><input type="submit" name="" id="btn" value="立即登录" /></td>
								</tr>
							</table>

						</form>
						<ul class="list">
							<li>
								<a href="register.html">注册小米账号</a><span>|</span></li>
							<li>
								<a href="#">忘记密码</a>
							</li>
						</ul>
						<table border="0" cellspacing="0" cellpadding="0" width="340px" style="margin: 120px 0px 0px 30px;">
							<tr height="30px">
								<td width="130px">
									<hr />
								</td>
								<td width="85px" id="otherlogin">其他方式登录</td>
								<td>
									<hr />
								</td>
						</table>
						<ul class="zhifufangshi">
							<li class="li1"></li>
							<li class="li2"></li>
							<li class="li3"></li>
							<li class="li4"></li>
						</ul>
					</div>
					<div id="myformmain2">
						<img src="img/cart/erweima.png" />
						<p>使用<span style="color: #FF6700;">小米商城APP </span>扫一扫</p>
						<p>MIUI系统可进入[设置] - [我的小米]扫码登录</p>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div>
				<ul>
					<li>
						<a href="#">简体</a> <span>|</span></li>
					<li>
						<a href="#">繁体</a> <span>|</span></li>
					<li>
						<a href="#">English</a> <span>|</span></li>
					<li>
						<a href="#">常见问题</a>
					</li>
				</ul>
			</div>
			<div style="clear: both;"> </div>
			<p>小米公司版权所有-京ICP备10046444-<img src="img/login/ghs.png " />京公网安备11010802020134号-京ICP证110507号</p>
		</div>
		<script type="text/javascript">
			function show(t,id) {
				var lis=document.querySelectorAll(".list1 li");
				for(var i=0;i<lis.length;i++){
					lis[i].style.color="#666666";
				}
				var clear = document.getElementById("myform1").getElementsByTagName("div");
				for(var i = 0; i < clear.length; i++) {
					clear[i].style.display = "none";
				}
				t.style.color="#F56600";
				document.getElementById(id).style.display = "block";
			}

			function yanzheng() {
				var username = document.getElementById("username");
				var pwd = document.getElementById("pwd");
				var tr1 = document.getElementById("tr1");
				var tr2 = document.getElementById("tr2");
				var tr3 = document.getElementById("tr3");
				var isgo = true;
				if(username.value == "") {
					tr1.style.display = "block";
					username.style.border = "1px solid #F87300"
					isgo = false;
				} else {
					tr1.style.display = "none";
					username.style.border = "1px solid #ABADB3"
				}
				if(username.value != "" && pwd.value == "") {
					tr2.style.display = "block";
					pwd.style.border = "1px solid #F87300";
					isgo = false;
				} else {
					tr2.style.display = "none";
					pwd.style.border = "1px solid #ABADB3";
				}
				return isgo;
			}
		</script>
	</body>

</html>